<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-12-09 16:54:23
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-14 11:06:34
 * @FilePath: \blog\src\views\admin\goods\add\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-steps :active="parseInt(activeIndex)" align-center>
    <el-step
      v-for="(item, index) in steps"
      :title="item.title"
      :key="index"
    ></el-step>
  </el-steps>

  <div style="height: 50px"></div>
  <el-tabs tab-position="left" v-model="activeIndex">
    <el-tab-pane
      v-for="(item, index) in steps"
      :label="item.title"
      :name="index"
    >
      <div
        v-if="item.title != '商品图片'"
        style="width: 500px; margin-bottom: 30px"
      >
        {{ item.title }}:
      </div>
      <amForm ref="baseForm" :form-item="item.formItem" :form-data="formData">
        <template #selector>
          <el-cascader
            v-model="formData.goodClass"
            :options="goodClasses"
            :props="props"
            @change="handleChange"
          />
        </template>
      </amForm>

      <!-- 添加图片 -->
      <div
        v-if="item.title == '商品图片'"
        style="width: 500px; margin-bottom: 30px"
      >
        <fileUpload :title="title" :limit="limit"></fileUpload>
      </div>

      <!-- 商品参数 -->
      <div v-if="item.title == '商品参数'" style="margin-bottom: 30px">
        <el-row v-for="(items,index) in Params" :key="index" style="margin-bottom:30px">
          <el-col v-if="items.name.index" :span="12">
              参数名：<el-input placeholder="请输入" style="width:200px;margin-right: 20px;" v-model="items.name.value"></el-input>
              <el-button type="danger" v-if="index!=0" @click="deleteParams(items.name.index)">删除</el-button>
              <el-button type="primary" @click="addParams(items.name.index)">添加</el-button>
          </el-col>
          <el-col v-if="items.value.length!=0" :span="12">
            <el-row v-for="(item,i) in items.value" :key="i">
              参数{{i+1}}：<el-input placeholder="请输入" style="width:200px;margin-right: 20px;" v-model="item.value"></el-input>
              <el-button type="danger" v-if="i!=0" @click="deleteSecondParams(items.name.index,item.index)">删除</el-button>
              <el-button type="primary" v-if="i==items.value.length-1" @click="addSecondParams(items.name.index,item.index)">添加</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 商品内容 -->
      <div v-if="item.title == '商品内容'" style="margin-bottom: 30px">
        <div style="border: 1px solid #ccc; margin:0 20px">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </div>

      <el-button
        v-if="index != steps.length - 1"
        type="primary"
        style="margin-left: 30px"
        @click="nextStep"
        >下一步</el-button
      >
      <el-button
        v-else
        type="primary"
        style="margin-left: 30px"
        @click="addGood"
        >新增商品</el-button
      >
    </el-tab-pane>
  </el-tabs>
</template>


<script lang="ts" setup>
import { ElMessage, FormInstance } from "element-plus";
import { ref, reactive, onMounted, shallowRef, onBeforeUnmount } from "vue";
import init from "./option";

// 进度条
const steps = init.steps;
const activeIndex = ref<number>(0)

// 表单
const formData = ref<any>({});
const goodClasses = ref([
  {
    label: "1",
    value: "1",
    children: [
      {
        label: "2",
        value: "2",
      },
    ],
  },
]);
const props = {
  expandTrigger: "hover",
};

// 商品图片
const title = "商品图片";
const limit = 6;

// 商品介绍：
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("");
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
const mode = "default";

// 商品参数
const Params=ref([{
  name:{
    index:'1',
    value:''
  },
  value:[{
    index:'1',
    value:''
  }]
}])

onMounted(() => {});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const nextStep = () => {
  if (activeIndex.value< steps.length - 1) {
    activeIndex.value++
  } else {
    ElMessage.success("提交成功");
  }
};

const handleChange = () => {};

// 新增商品
const addGood = () => {
  console.log(valueHtml.value);
};

const handleCreated = (editor:any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 商品参数
const addParams=(PName:string)=>{
  let name:number=parseInt(PName)+1
  Params.value.push({
    name:{
      index:name.toString(),
      value:''
    },
    value:[{
      index:'1',
      value:''
    }]
  })
  console.log(Params.value)
}

const addSecondParams=(PNameIndex:string,secondNameIndex:string)=>{
  let name:number=parseInt(secondNameIndex)+1
  Params.value.forEach((item,index)=>{
    if(item.name.index==PNameIndex){
      item.value.push({
        index:name.toString(),
        value:''
      })
    }
  })
}

const deleteParams=(PNameIndex:string)=>{
  let newArr:Array<any>=[]
  Params.value.forEach(item=>{
    if(item.name.index!=PNameIndex){
      newArr.push(item)
    }
  })
  Params.value=newArr
}

const deleteSecondParams=(PNameIndex:string,secondNameIndex:string)=>{
  let newArr:Array<any>=[]
  Params.value.forEach((item)=>{
    if(item.name.index==PNameIndex){
      item.value.forEach(i=>{
        if(i.index!=secondNameIndex){
          newArr.push(i)
        }
      })
    }
    item.value=newArr
  })
}
</script>


<style lang="scss" scoped>
</style>